import React, { useCallback, useMemo, useState } from "react";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";
import { Product } from "@/business.InterfaceLayer/type";
import ImageAtom from "../../UI_KIT/Atoms/Image.Atom";
import ImageEnum from "../../UI_KIT/Atoms/Image.Atom/enum";
import PlusIcon from "../../shared/icons/plus.svg?react";
import ButtonAtomEnum from "../../UI_KIT/Atoms/Button.Atom/enum";
import ButtonAtom from "../../UI_KIT/Atoms/Button.Atom";
import ModalWindowWidget from "../ModalWindow.widget";
import { TFunction } from "i18next";
import AdminListProductsOrganisms from "../../UI_KIT/Organisms/AdminListProducts.Organisms";
import AdminHeadProducts from "../../UI_KIT/Organisms/AdminHeadFiltersProducts.Organisms";
import AdminHeadListProducts from "../../UI_KIT/Organisms/AdminHeadListProducts.Organisms";
import ModalWindowEnum from "../ModalWindow.widget/enum";

interface headItemsProps {
  title: string;
  className: string;
}
interface TestTableAdminProps {
  products?: Product[];
  t?: TFunction;
  filters?: any;
  applyFilters?: any;
}

const TestTableAdmin: React.FC<TestTableAdminProps> = (props) => {
  const { products, t, filters, applyFilters } = props;
  const headItems = useMemo(() => {
    return t?.("AdminPage.productPage.headTable", {
      returnObjects: true,
    }) as headItemsProps[];
  }, [t]);

  const sortSortFilterSelectItems = useMemo(() => {
    return t?.("AdminPage.productPage.filterModules.sortModule", {
      returnObjects: true,
    }) as [];
  }, [t]);

  const [isShowModal, setIsShowModal] = useState(false);
  const [isModalProduct, setModalProduct] = useState(false);
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);

  const openModal = useCallback(() => {
    setIsShowModal(true);
  }, [setIsShowModal]);

  const openProductModal = useCallback(
    (product: Product) => {
      setSelectedProduct(product);
      setModalProduct(true);
    },
    [setSelectedProduct, setModalProduct]
  );

  const renderProducts = useMemo(() => products, [products]);
  return (
    <>
      {isShowModal && (
        <ModalWindowWidget
          t={t}
          type={ModalWindowEnum.enum_addModal}
          close={setIsShowModal}
        />
      )}
      {isModalProduct && (
        <ModalWindowWidget
          t={t}
          type={ModalWindowEnum.enum_editModal}
          close={setModalProduct}
          product={selectedProduct}
        />
      )}

      <ButtonAtom
        className="inline-flex items-center gap-2 bg-[#fd784c] text-white py-2 px-3 mb-5 rounded-full"
        type={ButtonAtomEnum.enum_defaultButton}
        onClick={openModal}
      >
        <ImageAtom
          className="fill-white w-6 h-6"
          type={ImageEnum.enum_defaultSvg}
          icon={<PlusIcon />}
        />
        <TextAtom type={TextAtomEnum.enum_h5}>
          {t?.("AdminPage.productPage.modalWindow.addProducts.title")}
        </TextAtom>
      </ButtonAtom>
      <div className="table">
        <AdminHeadProducts
          filters={filters}
          applyFilters={applyFilters}
          items={sortSortFilterSelectItems}
        />
        <div className="overflow-x-auto	overflow-y-auto">
          <AdminHeadListProducts headItems={headItems} />
          {renderProducts?.map((e, index) => (
            <div
              key={index}
              className="tbody2 py-2 border-b-[1px] border-tiffany cursor-pointer"
              onClick={() => openProductModal(e)}
            >
              <AdminListProductsOrganisms product={e} />
            </div>
          ))}
        </div>
      </div>
    </>
  );
};
export default React.memo(TestTableAdmin);
